import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
/* Layout */
import Layout from "@/layout/index.vue";
Vue.use(VueRouter);
/*
  name:'router-name'             the name field is required when using <keep-alive>, it should also match its component's name property
                                 detail see : https://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
  redirect:                      if set to 'noredirect', no redirect action will be trigger when clicking the breadcrumb
  meta: {
    roles: ['admin', 'editor']   will control the page roles (allow setting multiple roles)
    title: 'title'               the name showed in subMenu and breadcrumb (recommend set)
    icon: 'svg-name'             the icon showed in the sidebar
    hidden: true                 if true, this route will not show in the sidebar (default is false)
    alwaysShow: true             if true, will always show the root menu (default is false)
                                 if false, hide the root menu when has less or equal than one children route
    breadcrumb: false            if false, the item will be hidden in breadcrumb (default is true)
    noCache: true                if true, the page will not be cached (default is false)
    affix: true                  if true, the tag will affix in the tags-view
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
*/
/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
export const asyncRoutes: RouteConfig[] = [
  {
    path: "/admin",
    component: Layout,
    meta: {
      title: "admin",
      alwaysShow: true, // will always show the root menu
    },
    children: [
      {
        path: "guanliyuan",
        component: () =>
          import(
            /* webpackChunkName: "permission-page" */ "@/views/permission/page.vue"
          ),
        name: "guanliyuan",
        meta: {
          title: "guanliyuan",
          name: "管理员",
        },
      },
      {
        path: "kefu",
        component: () =>
          import(
            /* webpackChunkName: "permission-page" */ "@/views/permission/page.vue"
          ),
        name: "kefu",
        meta: {
          title: "kefu",
          name: "客服",
        },
      },
      {
        path: "yonghu",
        component: () =>
          import(
            /* webpackChunkName: "permission-page" */ "@/views/permission/page.vue"
          ),
        name: "yonghu",
        meta: {
          title: "yonghu",
          name: "用户",
        },
      },
      {
        path: "zhishu",
        component: () =>
          import(
            /* webpackChunkName: "permission-page" */ "@/views/permission/page.vue"
          ),
        name: "zhishu",
        meta: {
          title: "zhishu",
          name: "直属用户",
        },
      },
    ],
  },
  {
    path: "/permission",
    component: Layout,
    redirect: "/permission/directive",
    meta: {
      title: "permission",
      icon: "lock",
      roles: ["admin", "editor"], // you can set roles in root nav
      alwaysShow: true, // will always show the root menu
    },
    children: [
      {
        path: "page",
        component: () =>
          import(
            /* webpackChunkName: "permission-page" */ "@/views/permission/page.vue"
          ),
        name: "PagePermission",
        meta: {
          title: "pagePermission",
          roles: ["admin"], // or you can only set roles in sub nav
        },
      },
      {
        path: "directive",
        component: () =>
          import(
            /* webpackChunkName: "permission-directive" */ "@/views/permission/directive.vue"
          ),
        name: "DirectivePermission",
        meta: {
          title: "directivePermission",
          // if do not set roles, means: this page does not require permission
        },
      },
      {
        path: "role",
        component: () =>
          import(
            /* webpackChunkName: "permission-role" */ "@/views/permission/role.vue"
          ),
        name: "RolePermission",
        meta: {
          title: "rolePermission",
          roles: ["admin"],
        },
      },
    ],
  },
  {
    path: "*",
    redirect: "/404",
    meta: { hidden: true },
  },
];
export default asyncRoutes;
